<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
    <title>iSlider more animation</title>
    <link rel="stylesheet" href="${request.contextPath}/resources/css/iSlider.min.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        /*ul wrapper*/

        #iSlider-wrapper-fhsj {
            height: 100%;
            width: 100%;
            overflow: hidden;
            position: absolute;
        }

        #iSlider-wrapper-fhsj ul {
            list-style: none;
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
        }

        #iSlider-wrapper-fhsj li {
            position: absolute;
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-pack: center;
            -webkit-box-align: center;
            list-style: none;
        }

        #iSlider-wrapper-fhsj li img {
            max-width: 100%;
            max-height: 100%;
        }
    </style>

</head>
<body>
<div id="iSlider-wrapper-fhsj"></div>
<script src="${request.contextPath}/resources/js/iSlider/iSlider.min.js"></script>
<script src="${request.contextPath}/resources/js/iSlider/iSlider.animate.min.js"></script>
<script src="${request.contextPath}/resources/js/iSlider/iSlider.plugin.button.min.js"></script>
<script src="${request.contextPath}/resources/js/iSlider/iSlider.plugin.dot.min.js"></script>
<script src="${request.contextPath}/resources/js/iSlider/iSlider.plugin.BIZone.min.js"></script>
<script src="${request.contextPath}/resources/js/touch_main.js"></script>
<script id="show-code">
    //滑动处理
    var startX, startY;
    document.addEventListener('touchstart',function (ev) {
        startX = ev.touches[0].pageX;
        startY = ev.touches[0].pageY;
    }, false);
    document.addEventListener('touchend',function (ev) {
        var endX, endY;
        endX = ev.changedTouches[0].pageX;
        endY = ev.changedTouches[0].pageY;
        var direction = GetSlideDirection(startX, startY, endX, endY);
        switch(direction) {
            case 0:
                break;
            case 1:
                break;
            case 2:
                break;
            case 3:
                iSliderFhsj.slideNext();
                break;
            case 4:
                iSliderFhsj.slidePrev();
                break;
            default:
        }
    }, false);

    var list = [
        {content: "${request.contextPath}/resources/image/img_001.png"},
        {content: "${request.contextPath}/resources/image/img_002.png"},
        {content: "${request.contextPath}/resources/image/img_003.png"}
    ];

    var iSliderFhsj = new iSlider(document.getElementById('iSlider-wrapper-fhsj'), list, {
        isLooping: 1,
        isOverspread: 1,
        isAutoplay: 0,
        isTouchable:false,
        animateTime: 800,
        isVertical:false,
        animateType: 'depth'
    });
</script>
</body>
</html>
